<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .imgs {
        display: block;
        margin: 0 auto;
    }
    
    .borders {
        border: 1px rgb(299, 299, 299) solid;
        border-radius: 10px;
    }
    
    #div1 {
        width: 500px;
        display: block;
        margin: 0 auto;
        cursor: pointer;
    }
    
    .txt {
        font-size: 2em;
        text-align: center;
        color: rgb(243, 202, 114);
    }
    
    .backs {
        background-color: rgb(133, 166, 228);
    }
    
    .removes {
        font-size: 4em;
    }
    
    .coalign {
        font-size: medium;
        font-weight: bold;
        text-align: center;
    }
    
    .inputs {
        display: block;
        margin: 0 auto;
    }
</style>

<body>
    <h2>
        <div id="div1" class="txt borders">点击祈祷放假</div>
    </h2>
    <img id="img1" class="imgs borders" style="width: 200px;" src="../imgs/person.png" /><br/>
    <div class="counter coalign">已祈祷0次</div><br/><br/>

    <input class="inputs" placeholder="家主正在倾听你的愿望..."></input>
    <script>
        let imgs = document.getElementsByTagName("img")[0]
        imgs.setAttribute("src", "../imgs/Sunday.png")

        let div1 = document.getElementById("div1")
        div1.classList.add("backs")
        div1.classList.add("removes")
        div1.classList.remove("removes")
        let flag = imgs.classList.contains("borders")
        console.log(flag)

        let sign = 0;
        let counterElement = document.querySelector(".counter");
        //鼠标移动
        imgs.addEventListener("mouseenter", function() {
            console.log("不敬仙师！")
        })
        imgs.addEventListener("mousemove", function() {
            console.log("你抚摸了星期日的脑袋")
        })
        imgs.addEventListener("mouseleave", function() {
                console.log("拜拜")
            })
            //点击
        div1.addEventListener("click", function() {
                sign += 1;
                counterElement.textContent = `已祈祷 ${sign} 次`;
            })
            //键盘
        let inputs = document.querySelector(".inputs");
        inputs.addEventListener("keyup", function(event) {
            console.log("你好这是", event.key)
        })
    </script>
</body>

</html>